<dom-module id="x-project">
  <template>
    x-project: [<content></content>]
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-project'
  });
</script>

<dom-module id="x-reproject">
  <template>
    <x-project>x-reproject: [<content></content>]</x-project>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-reproject'
  });
</script>

<dom-module id='x-rereproject'>
  <template>
    <x-reproject>x-rereproject: [<content></content>]</x-reproject>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-rereproject',
    attachedCount: 0,
    attached: function() {
      this.attachedCount++;
    }
  });
</script>

<dom-module id="x-test">
  <template>
    <x-rereproject><span id="projected">projected</span></x-rereproject>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-test'
  });
</script>

<dom-module id="x-test-no-distribute">
  <template>
    <span>Local dom without insertion point.</span>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-test-no-distribute'
  });
</script>

<dom-module id="x-distribute">
  <template>
    <div>
      <span>Elements without test attribute</span>
      <div id="notTestContainer" style="color: white; background-color: green; min-height: 1em;">
        <content id="notTestContent" select=":not([test])"></content>
      </div>
      <span>Elements with test attribute</span>
      <div style="color: white; background-color: red; min-height: 1em;">
        <div id="testContainer">
          <content id="testContent" select="[test]"></content>
        </div>
      </div>
    </div>
  </template>
</dom-element>

<script>
  Polymer({
    is: "x-distribute"      
  });
</script>

<dom-module id="x-compose">
  <template><x-project id="project"></x-project></template>
</dom-module>
<script>
  Polymer({
    is: 'x-compose'
  });
</script>


<dom-module id="x-select3">
  <template><content select="[s3]"></content></template>
  <script>Polymer({is: 'x-select3'});</script>
</dom-module>

<dom-module id="x-select2">
  <template><x-select3 id="select"><content select="[s2]"></content></x-select3></template>
  <script>Polymer({is: 'x-select2'});</script>
</dom-module>

<dom-module id="x-select1">
  <template><x-select2 id="select"><content select="[s1]"></content></x-select2></template>
  <script>Polymer({is: 'x-select1'});</script>
</dom-module>

<dom-module id="x-select-class3">
  <template><content select=".s3"></content></template>
  <script>Polymer({is: 'x-select-class3'});</script>
</dom-module>

<dom-module id="x-select-class2">
  <template><x-select-class3 id="select"><content select=".s2"></content></x-select-class3></template>
  <script>Polymer({is: 'x-select-class2'});</script>
</dom-module>

<dom-module id="x-select-class1">
  <template><x-select-class2 id="select"><content select=".s1"></content></x-select-class2></template>
  <script>Polymer({is: 'x-select-class1'});</script>
</dom-module>


<dom-module id="x-echo">
  <template><content></content></template>
  <script>Polymer({is: 'x-echo'});</script>
</dom-module>


<dom-module id="x-redistribute-a-b">
  <template>
    <x-echo id="echo1"><content select=".a"></content></x-echo>
    <x-echo id="echo2"><content select=".b"></content></x-echo>
  </template>
  <script>Polymer({is: 'x-redistribute-a-b'});</script>
</dom-module>

<dom-module id="x-attr">
  <template>Attr1</template>
  <script>Polymer({
    is: 'x-attr',
    hostAttributes: {
      bar: 'bar'
    },
    properties: {
      foo: {type: Boolean, reflectToAttribute: true, value: false}
    }

  });</script>
</dom-module>

<dom-module id="x-attr2">
  <template>Attr2</template>
  <script>Polymer({
    is: 'x-attr2',
    properties: {
      foo: {type: Boolean, reflectToAttribute: true, value: true}
    }

  });</script>
</dom-module>

<dom-module id="x-select-attr">
  <template>
    Foo: [<content select="[foo]"></content>]
    Bar: [<content select="[bar]"></content>]
  </template>
  <script>Polymer({is: 'x-select-attr'});</script>
</dom-module>

<dom-module id="x-compose-select-attr">
  <template>
    <x-select-attr id="select">
      <x-attr id="attr1"></x-attr>
      <x-attr2 id="attr2"></x-attr2>
    </x-select-attr>
  </template>
  <script>Polymer({is: 'x-compose-select-attr'});</script>
</dom-module>


